<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
	</head>
	<body>
		<div class="content">
			<select name="" id="select1" style="width: 100px;height: 100px;" multiple="">
				<option value="1">选项1</option>
				<option value="1">选项1</option>
				<option value="1">选项2</option>
				<option value="1">选项3</option>
				<option value="1">选项4</option>
			</select>
			<div id="">
				<span id="add">选中添加到右边</span>
				<span id="add_all">全部添加到</span>
			</div>
		</div>
		<div class="content">
				<select multiple="" id="select2"style="width: 100px;height: 100px;" ></select>
				<div id="">
					<span id="remove">选中删除到左边</span>
					<span id="remove_all">选中删除到左边</span>
				</div>
		</div>
		<script>
			$("#add").click(function(){
				var options=$("#select1 option:selected");
				var $remove=options.remove();//删除下拉列表中选中的选项
				$remove.appendTo("#select2");
			})
			//全选
			$("#add_all").click(function(){
				var options=$("#select1 option");
				options.appendTo("#select2");//appendTo将所有元素追加到指定的元素中
				
			})
		</script>
	</body>
</html>
